<div class="row btns-row">
  <div class="col-sm-4 col-6">
    <div class="btn-group" ngbDropdown>
      <button type="button" class="btn btn-primary" ngbDropdownToggle>
        Primary
      </button>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a href="#">Action</a></li>
        <li class="dropdown-item"><a href="#">Another action</a></li>
        <li class="dropdown-item"><a href="#">Something else here</a></li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-sm-4 col-6">
    <div class="btn-group" ngbDropdown>
      <button type="button" class="btn btn-success" ngbDropdownToggle>
        Success
      </button>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a href="#">Action</a></li>
        <li class="dropdown-item"><a href="#">Another action</a></li>
        <li class="dropdown-item"><a href="#">Something else here</a></li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-sm-4 col-6">
    <div class="btn-group" ngbDropdown>
      <button type="button" class="btn btn-info" ngbDropdownToggle>
        Info
      </button>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a href="#">Action</a></li>
        <li class="dropdown-item"><a href="#">Another action</a></li>
        <li class="dropdown-item"><a href="#">Something else here</a></li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-sm-4 col-6">
    <div class="btn-group" ngbDropdown>
      <button type="button" class="btn btn-default" ngbDropdownToggle>
        Default
      </button>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a href="#">Action</a></li>
        <li class="dropdown-item"><a href="#">Another action</a></li>
        <li class="dropdown-item"><a href="#">Something else here</a></li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-sm-4 col-6">
    <div class="btn-group" ngbDropdown>
      <button type="button" class="btn btn-warning" ngbDropdownToggle>
        Warning
      </button>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a href="#">Action</a></li>
        <li class="dropdown-item"><a href="#">Another action</a></li>
        <li class="dropdown-item"><a href="#">Something else here</a></li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-sm-4 col-6">
    <div class="btn-group" ngbDropdown>
      <button type="button" class="btn btn-danger" ngbDropdownToggle>
        Danger
      </button>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a href="#">Action</a></li>
        <li class="dropdown-item"><a href="#">Another action</a></li>
        <li class="dropdown-item"><a href="#">Something else here</a></li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</div>

<h5 class="panel-subtitle">Split button dropdowns</h5>

<div class="row btns-row">
  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
    <div class="btn-group flex-dropdown" ngbDropdown>
      <button type="button" class="btn btn-primary">Primary</button>
      <button type="button" class="btn btn-primary" ngbDropdownToggle>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a href="#">Action</a></li>
        <li class="dropdown-item"><a href="#">Another action</a></li>
        <li class="dropdown-item"><a href="#">Something else here</a></li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
    <div class="btn-group flex-dropdown" ngbDropdown>
      <button type="button" class="btn btn-success">Success</button>
      <button type="button" class="btn btn-success" ngbDropdownToggle>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a href="#">Action</a></li>
        <li class="dropdown-item"><a href="#">Another action</a></li>
        <li class="dropdown-item"><a href="#">Something else here</a></li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
    <div class="btn-group flex-dropdown" ngbDropdown>
      <button type="button" class="btn btn-info">Info</button>
      <button type="button" class="btn btn-info" ngbDropdownToggle>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a href="#">Action</a></li>
        <li class="dropdown-item"><a href="#">Another action</a></li>
        <li class="dropdown-item"><a href="#">Something else here</a></li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
    <div class="btn-group flex-dropdown" ngbDropdown>
      <button type="button" class="btn btn-default">Default</button>
      <button type="button" class="btn btn-default" ngbDropdownToggle>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a href="#">Action</a></li>
        <li class="dropdown-item"><a href="#">Another action</a></li>
        <li class="dropdown-item"><a href="#">Something else here</a></li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
    <div class="btn-group flex-dropdown" ngbDropdown>
      <button type="button" class="btn btn-warning">Warning</button>
      <button type="button" class="btn btn-warning" ngbDropdownToggle>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a href="#">Action</a></li>
        <li class="dropdown-item"><a href="#">Another action</a></li>
        <li class="dropdown-item"><a href="#">Something else here</a></li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
  <div class="col-sm-4 col-6 col-lg-4 col-md-6">
    <div class="btn-group flex-dropdown" ngbDropdown>
      <button type="button" class="btn btn-danger">Danger</button>
      <button type="button" class="btn btn-danger" ngbDropdownToggle>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu">
        <li class="dropdown-item"><a href="#">Action</a></li>
        <li class="dropdown-item"><a href="#">Another action</a></li>
        <li class="dropdown-item"><a href="#">Something else here</a></li>
        <li class="dropdown-divider"></li>
        <li class="dropdown-item"><a href="#">Separated link</a></li>
      </ul>
    </div>
  </div>
</div>
